<!--
 * @Description: * 
 * @Date: 2021-01-03 23:15:06
 * @LastEditTime: 2021-04-01 21:02:46
 * @Author: Ji YingHao
 * @FilePath: /nuxt-app/pages/personalCenter/index.vue
-->
<template>
   <div class="personalCenter">
       <div class="title" v-if="userData != null">
           <div>
               <div>
                   <!-- <Avatar shape="square" icon="ios-person" size="large" > {{ userData.name }} </Avatar> -->
                   <!-- <Avatar :style="{background: '#f56a00'}">{{ userData.name }}</Avatar> -->
                   <Avatar :src="userData.avatar" />
               </div>
               <div style="padding-top: 20px;">
                   <p>{{ userData.account }}</p>
                   <p>手机号码：{{ userData.phone }}</p>
                   <p>ID：{{ userData.uid }}</p>
                   <p>注册于 {{ userData.createTime }}</p>
               </div>
           </div>
           <img src="https://pic4.zhimg.com/50/v2-b2bf803eccc380a483d84d94f8fe48cc_400x224.jpg" alt="">
       </div>
       <Tabs :animated="false" :value="tabIndex" @on-click="change">
        <TabPane label="会员中心" name="0">
            <vip />
        </TabPane>
        <TabPane label="在线充值" name="1">
            <recharge />
        </TabPane>
        <TabPane label="VIP升级" name="2">
            <upgrade />
        </TabPane>
        <TabPane label="我的资料" name="3">
            <mydata />
        </TabPane>
        <TabPane label="我的下载" name="4">
            <download />
        </TabPane>
        <TabPane label="我的收藏" name="5">
            <keep />
        </TabPane>
    </Tabs>
  </div>
</template>
<script>
// import Vip from "../../components/vip"
   export default { 
      name: "personalCenter",
      components: {},
      watch:{
            $route(to,from){
            console.log(from.query.index);//从哪来
            console.log(to.query.index);//到哪去
            if( from.query.index !== to.query.index ){
                console.log('shuaxin');
                this.tabIndex = this.$route.query.index;
            }
            }
        },
      data() {
         return {
             userData:null,
             tabIndex: '0'
         }
      },
      computed: {},
      mounted: function() {
          this.userData = this.$store.state.user.userData;
          this.tabIndex = this.$route.query.index;
      },
      methods: {
          change(e){
              console.log( e );
              this.tabIndex = e;
          }
      }
   }

</script>
<style lang="scss">
.personalCenter {
  .title {
    width: 100%;
    height: 180px;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    > div {
      text-align: center;
      color: #fff;
      padding-top: 20px;
      p {
        font-size: 14px;
        font-weight: 600;
      }
    }
    img {
      width: 100%;
      height: 180px;
      position: absolute;
      top: 0;
      z-index: -1;
    }
  }
}
</style>